<template>
  <el-select :value="value" v-bind="$attrs" v-on="$listeners">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "QuerySelect",
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    url: {
      type: String,
      default: "",
      require: true,
    },
  },
  data() {
    return {
      options: [],
    };
  },
  created() {
    this.getOptionsData();
  },
  methods: {
    async getOptionsData() {
      if (!this.url) {
        throw new Error("url is required");
      }
      const response = await new Promise((resolve) => {
        resolve([
          { label: "1", value: "1" },
          { label: "2", value: "2" },
        ]);
      });
      this.options = response;
    },
  },
};
</script>

<style></style>
